<template>
  <div class="box">
    <div v-if="!isShow">
      <user></user>
    </div>
    <div v-else>
      <header class="header">
        <div class="top">
          <a>我的</a>
          <router-link tag="a" to="/set" class="iconfont icon-shezhi2"></router-link>
          <router-link tag="a" to="/message" class="iconfont icon-lingdangcopy"></router-link>
        </div>
      </header>
      <div class="content">
        <router-link to="/userinfo" class="touxiang">
          <p class="userhead"><img src="./../../assets/food2.jpg"/></p>
          <p v-text="username">LEI-LEI</p>
          <span v-text="username"></span>
          <span class="iconfont icon-iconfontjiantou5"></span>
        </router-link>
        <ul class="info">
          <router-link to="/usercenter" tag="li">编辑资料</router-link>
          <li>菜谱</li>
          <li>关注</li>
        </ul>
        <ul class="cont">
          <li><a>我的订单</a><span class="iconfont icon-iconfontjiantou5"></span></li>
          <li><a>开通会员</a><span class="iconfont icon-iconfontjiantou5"></span></li>
          <li><a>我的优惠券</a><span class="iconfont icon-iconfontjiantou5"></span></li>
          <li><a>家庭膳食管理</a><span class="iconfont icon-iconfontjiantou5"></span></li>
          <li><a>我的收藏</a><span class="iconfont icon-iconfontjiantou5"></span></li>
          <li><a>最近浏览菜谱</a><span class="iconfont icon-iconfontjiantou5"></span></li>
          <li><a>我的设备</a><span class="iconfont icon-iconfontjiantou5"></span></li>
          <li><a>采购清单</a><span class="iconfont icon-iconfontjiantou5"></span></li>
          <li><a>草稿箱</a><span class="iconfont icon-iconfontjiantou5"></span></li>
          <li><a>分享豆果美食给朋友</a><span class="iconfont icon-iconfontjiantou5"></span></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import user from './User'
export default {
  components:{user},
  data () {
    return {
      username: '一枚水果软糖',
      isShow:false
    }
  },
  methods: {
  },
  mounted(){
    if(localStorage.getItem('isLogin') == 'ok') {
      this.isShow=true;
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/lib/reset.scss';
.box {
  overflow: auto;
  .header{
    border-bottom:1px solid #bbb;
    @include background-color(#fff);
    @include text-color(#000);
    position: fixed;
    z-index: 999;
    .top{
      @include rect(100%,0.44rem);
      a:nth-of-type(1){
        @include font-size(16px);
        @include text-color(#000);
        @include line-height(44px);
        @include margin(0 0.15rem);
        float:left;
      }
      a:nth-of-type(2){
        @include font-size(20px);
        @include text-color(#000);
        @include line-height(38px);
        @include margin(0 0 0 2.5rem);
        float:left;
      }
      a:nth-of-type(3){
        @include font-size(20px);
        @include text-color(#000);
        @include line-height(38px);
        @include margin(0 10px);
        float:right;
      }
    }
  }
  .content{
    margin-top: 44px;
    .touxiang{
      @include rect(100%,1rem);
      @include background-color(#fff);
      position:relative;
      .userhead{
        @include rect(70px,70px);
        @include border-radius(50%);
        border:1px solid #333;
        @include margin(20px 0 0 30px);
        float: left;
      }
      img{
        @include rect(0.69rem,0.69rem);
        @include border-radius(50%);
      }
      p{
        @include font-size(18px);
        @include font-weight(normal);
        @include margin(20px 0 0 30px);
        float: left;
        @include rect(2rem,30px);
        @include text-color(#000);
      }
      span:nth-of-type(1){
        @include background-color(#fff);
        @include padding(2px 5px);
        @include text-color(#000);
        @include font-size(12px);
        // float:left;
        display: inline-block;
        @include margin(10px 0 0 25px);
      }
      span:nth-of-type(2){
        position: absolute;
        top: -32px;
        right: -160px;
        font-size: 20px;
        font-weight: 500;
        color: #000;
      }
    }
    .info{
      @include rect(100%,0.4rem);
      @include flexbox();
      margin-top: 30px;
      border-bottom: 1px solid #ccc;
    }
    li{
      flex: 1;
      text-align: center;
    }
    li:nth-of-type(1){
      @include font-size(14px);
      @include text-color(blue);
      @include font-weight(100);
    }
    li:last-child {
      border: 0;
    }
    li{
      @include overflow();
    }
    li a{
      @include font-size(14px);
      @include text-color(#333);
      @include line-height(45px);
      @include font-weight(600);
      float:left;
    }
    li span{
      float: right;
      font-size:20px;
      line-height: 46px;
      color:#000;
      font-weight: 500;
    }
    .cont {
      width: 90%;
      margin: 0 auto;
      li {
        border-bottom: 1px solid #ccc;
        &:last-child {
          border: 0;
        }
      }
    }
  }
}

</style>
